<!-- 气泡图 -->
<template>
    <view class="flexac">
        <view class="charts-box p-re bor_radius" :style="{width: width + 'rpx', height: width + 'rpx'}">
            <view v-for="(item,index) in chartData" :key="index" class="item p-ab bor_radius size26 white flexac"
                :style="{ width: item.diam + 'rpx', height: item.diam + 'rpx', top: item.top + 'rpx', left: item.left + 'rpx', background: item.color }">
                {{ item.name }}
            </view>
        </view>
    </view>
</template>

<script>
export default {
    props: {
        width: {
            type: Number,
            default: 600
        },
        rawData: {
            type: Array,
            default: ()=>[]
        }
    },
    data(){
        return {
            chartData: [
                { name: '百褶裙', percent: 20 },
                { name: '直筒裤', percent: 15 },
                { name: '羊毛衫', percent: 10 },
                { name: '针织衣', percent: 40 },
                { name: '板鞋', percent: 10 },
                { name: '工装裤', percent: 5 }
            ],
            position: [1,2,3,4,5,6,7,8], // 代表8个位置
            colors: ['#6473FF','#35B1FF','#6896FF','#A1CFFF','#35E0FF','#A9CDFF','#98E6FF','#99F4FF','#3687FF']
        }
    },
    watch: {
        rawData: {
            handler(newVal){
                if(!newVal) return
                this.chartData = JSON.parse(JSON.stringify(newVal))
                this.formatData()
            }
        }
    },
    methods: {
        getRandomNum(){
            let i = Math.floor(Math.random() * this.position.length) // 随机下标
            let num = this.position[i] // 随机元素
            this.position.splice(i, 1) // 不重复
            return num
        },
        formatData(){
            // 容器1/2斜边
            let bias = Math.pow(Math.pow(this.width, 2)*2, 0.5) / 2
            // 降序排列
            this.chartData.sort((a, b) => b.percent - a.percent)
            // 第一项为最大值
            let maxDiam = this.width * this.chartData[0].percent / 100
            let maxRadius = maxDiam / 2
            this.chartData.forEach((item,index)=>{
                item.color = this.colors[index]
                if(index){
                    item.diam = this.width * item.percent / 100
                    // 圆心连线所构成三角形的直角边
                    let side = (item.diam / 2 + maxRadius) / bias * (this.width / 2)
                    // 间距
                    let gap = (maxDiam - item.diam)*0.05
                    let num = this.getRandomNum()

                    if(num == 1){ // 左上
                        item.top = this.width / 2 - side - item.diam / 2 - gap
                        item.left = item.top

                    } else if(num == 2){ // 上
                        item.top = this.width / 2 - maxRadius - item.diam - gap
                        item.left = this.width / 2 - item.diam / 2

                    } else if(num == 3){ // 右上
                        item.top = this.width / 2 - side - item.diam / 2 - gap
                        item.left = this.width / 2 + side - item.diam / 2 + gap

                    } else if(num == 4){ // 左
                        item.top = this.width / 2 - item.diam / 2
                        item.left = this.width / 2 - maxRadius - item.diam - gap

                    } else if(num == 5){ // 右
                        item.top = this.width / 2 - item.diam / 2
                        item.left = this.width / 2 + maxRadius + gap

                    } else if(num == 6){ // 左下
                        item.top = this.width / 2 + side - item.diam / 2 + gap
                        item.left = this.width / 2 - side - item.diam / 2 - gap

                    } else if(num == 7){ // 下
                        item.top = this.width / 2 + maxRadius + gap
                        item.left = this.width / 2 - item.diam / 2

                    } else if(num == 8){ // 右下      
                        item.top = this.width / 2 + side - item.diam / 2 + gap
                        item.left = item.top
                        
                    }
                } else { // 水平垂直居中
                    item.diam = maxDiam
                    item.top = this.width / 2 - maxRadius
                    item.left = this.width / 2 - maxRadius
                }
            })
        }
    }
}
</script>

<style lang="scss" scoped>
.charts-box {
    background: #F1F6FF;
    .item {
        white-space: nowrap;
        overflow: visible;
    }
}
</style>